/* ==================
		弹性布局
 ==================== */
.flex {
  display: flex !important;

  &-sub {
    flex: 1 !important;
  }

  &-twice {
    flex: 2 !important;
  }

  &-treble {
    flex: 3 !important;
  }

  &-column {
    flex-direction: column !important;
  }

  &-row {
    flex-direction: row !important;
  }

  &-column-reverse {
    flex-direction: column-reverse !important;
  }

  &-row-reverse {
    flex-direction: row-reverse !important;
  }

  &-wrap {
    flex-wrap: wrap !important;
  }

  &-center {
    @include flex-center;
  }

  &-bar {
    @include flex-bar;
  }
}

.basis {
  @each $class, $value in (xs: 20%, sm: 40%, df: 50%, lg: 60%, xl: 80%) {
    &-#{$class} {
      flex-basis: $value !important;
    }
  }
}

.align {
  @each $class,
  $value in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline) {
    &-#{$class} {
      align-items: $value !important;
    }
  }
}

.self {
  @each $class,
  $value in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline) {
    &-#{$class} {
      align-self: $value !important;
    }
  }
}

.justify {
  @each $class,
  $value in (
          start: flex-start,
          end: flex-end,
          center: center,
          between: space-between,
          around: space-around,
          evenly: space-evenly
  ) {
    &-#{$class} {
      justify-content: $value !important;
    }
  }
}

.wh {
  @for $value from 1 through 750 {
    &_#{$value} {
      width: #{$value}rpx !important;
    }
  }
}

.hW {
  @for $value from 1 through 750 {
    &_#{$value} {
      height: #{$value}rpx !important;
    }
  }
}

.fs {
  @for $value from 1 through 100 {
    &_#{$value} {
      font-size: #{$value}rpx !important;
    }
  }
}

.fw {
  @each $class,
  $value in (
          400: 400,
          500: 500,
          600: 600,
          700: 700,
          bold: bold,
          bolder: bolder
  ) {
    &_#{$class} {
      font-weight: #{$value} !important;
    }
  }
}

.mt {
  @for $value from 1 through 300 {
    &_#{$value} {
      margin-top: #{$value}rpx !important;
    }
  }
}

.ml {
  @for $value from 1 through 150 {
    &_#{$value} {
      margin-left: #{$value}rpx !important;
    }
  }
}

.mr {
  @for $value from 1 through 150 {
    &_#{$value} {
      margin-right: #{$value}rpx !important;
    }
  }
}

.mb {
  @for $value from 1 through 150 {
    &_#{$value} {
      margin-bottom: #{$value}rpx !important;
    }
  }
}

.z {
  @for $value from 1 through 30 {
    &_#{$value} {
      z-index: $value !important;
    }
  }
}

.pageHeight {
  min-height: 100vh;
  /* #ifdef H5 */
  margin: 0 auto;
  /* #endif */
  position: relative;
}